.weatherIcon {
  width: 46px;
  height: 46px;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  border-radius: 50%;
  border: none !important;
  overflow: visible !important;
}
.BB {
  background-image: url(../imgs/BB.png);
  animation: BB 0.8s linear infinite;
}
@keyframes BB {
  0% {
      box-shadow:
          0 0 0 0 rgba(#5886fc, 0.3),
          0 0 0 15px rgba(#5886fc, 0.3),
          0 0 0 30px rgba(#5886fc, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#5886fc, 0.3),
          0 0 0 30px rgba(#5886fc, 0.3),
          0 0 0 50px rgba(#5886fc, 0);
  }
}

.SD {
  background-image: url(../imgs/SD.png);
  animation: SD 0.8s linear infinite;
}
@keyframes SD {
  0% {
      box-shadow:
          0 0 0 0 rgba(#59ceff, 0.3),
          0 0 0 15px rgba(#59ceff, 0.3),
          0 0 0 30px rgba(#59ceff, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#59ceff, 0.3),
          0 0 0 30px rgba(#59ceff, 0.3),
          0 0 0 50px rgba(#59ceff, 0);
  }
}

.DW {
  background-image: url(../imgs/DW.png);
  animation: DW 0.8s linear infinite;
}
@keyframes DW {
  0% {
      box-shadow:
          0 0 0 0 rgba(#dbdbdb, 0.3),
          0 0 0 15px rgba(#dbdbdb, 0.3),
          0 0 0 30px rgba(#dbdbdb, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#dbdbdb, 0.3),
          0 0 0 30px rgba(#dbdbdb, 0.3),
          0 0 0 50px rgba(#dbdbdb, 0);
  }
}

.M {
  background-image: url(../imgs/M.png);
  animation: M 0.8s linear infinite;
}
@keyframes M {
  0% {
      box-shadow:
          0 0 0 0 rgba(#dbdbdb, 0.3),
          0 0 0 15px rgba(#dbdbdb, 0.3),
          0 0 0 30px rgba(#dbdbdb, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#dbdbdb, 0.3),
          0 0 0 30px rgba(#dbdbdb, 0.3),
          0 0 0 50px rgba(#dbdbdb, 0);
  }
}

.DLJB {
  background-image: url(../imgs/DLJB.png);
  animation: DLJB 0.8s linear infinite;
}
@keyframes DLJB {
  0% {
      box-shadow:
          0 0 0 0 rgba(#1296db, 0.3),
          0 0 0 15px rgba(#1296db, 0.3),
          0 0 0 30px rgba(#1296db, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#1296db, 0.3),
          0 0 0 30px rgba(#1296db, 0.3),
          0 0 0 50px rgba(#1296db, 0);
  }
}

.SLHX {
  background-image: url(../imgs/SLHX.png);
  animation: SLHX 0.8s linear infinite;
}
@keyframes SLHX {
  0% {
      box-shadow:
          0 0 0 0 rgba(#ed582b, 0.3),
          0 0 0 15px rgba(#ed582b, 0.3),
          0 0 0 30px rgba(#ed582b, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#ed582b, 0.3),
          0 0 0 30px rgba(#ed582b, 0.3),
          0 0 0 50px rgba(#ed582b, 0);
  }
}

.LYDF {
  background-image: url(../imgs/LYDF.png);
  animation: LYDF 0.8s linear infinite;
}
@keyframes LYDF {
  0% {
      box-shadow:
          0 0 0 0 rgba(#efefef, 0.3),
          0 0 0 15px rgba(#efefef, 0.3),
          0 0 0 30px rgba(#efefef, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#efefef, 0.3),
          0 0 0 30px rgba(#efefef, 0.3),
          0 0 0 50px rgba(#efefef, 0);
  }
}

.TF {
  background-image: url(../imgs/TF.png);
  animation: TF 0.8s linear infinite;
}
@keyframes TF {
  0% {
      box-shadow:
          0 0 0 0 rgba(#0fe7e9, 0.3),
          0 0 0 15px rgba(#0fe7e9, 0.3),
          0 0 0 30px rgba(#0fe7e9, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#0fe7e9, 0.3),
          0 0 0 30px rgba(#0fe7e9, 0.3),
          0 0 0 50px rgba(#0fe7e9, 0);
  }
}

.BY {
  background-image: url(../imgs/BY.png);
  animation: BY 0.8s linear infinite;
}
@keyframes BY {
  0% {
      box-shadow:
          0 0 0 0 rgba(#43a1f6, 0.3),
          0 0 0 15px rgba(#43a1f6, 0.3),
          0 0 0 30px rgba(#43a1f6, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#43a1f6, 0.3),
          0 0 0 30px rgba(#43a1f6, 0.3),
          0 0 0 50px rgba(#43a1f6, 0);
  }
}

.BX {
  background-image: url(../imgs/BX.png);
  animation: BX 0.8s linear infinite;
}
@keyframes BX {
  0% {
      box-shadow:
          0 0 0 0 rgba(#9cdcf8, 0.3),
          0 0 0 15px rgba(#9cdcf8, 0.3),
          0 0 0 30px rgba(#9cdcf8, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#9cdcf8, 0.3),
          0 0 0 30px rgba(#9cdcf8, 0.3),
          0 0 0 50px rgba(#9cdcf8, 0);
  }
}

.HC {
  background-image: url(../imgs/HC.png);
  animation: HC 0.8s linear infinite;
}
@keyframes HC {
  0% {
      box-shadow:
          0 0 0 0 rgba(#59ceff, 0.3),
          0 0 0 15px rgba(#59ceff, 0.3),
          0 0 0 30px rgba(#59ceff, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#59ceff, 0.3),
          0 0 0 30px rgba(#59ceff, 0.3),
          0 0 0 50px rgba(#59ceff, 0);
  }
}

.DF {
  background-image: url(../imgs/DF.png);
  animation: DF 0.8s linear infinite;
}
@keyframes DF {
  0% {
      box-shadow:
          0 0 0 0 rgba(#80aaff, 0.3),
          0 0 0 15px rgba(#80aaff, 0.3),
          0 0 0 30px rgba(#80aaff, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#80aaff, 0.3),
          0 0 0 30px rgba(#80aaff, 0.3),
          0 0 0 50px rgba(#80aaff, 0);
  }
}

.SCB {
  background-image: url(../imgs/SCB.png);
  animation: SCB 0.8s linear infinite;
}
@keyframes SCB {
  0% {
      box-shadow:
          0 0 0 0 rgba(#ffcd00, 0.3),
          0 0 0 15px rgba(#ffcd00, 0.3),
          0 0 0 30px rgba(#ffcd00, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#ffcd00, 0.3),
          0 0 0 30px rgba(#ffcd00, 0.3),
          0 0 0 50px rgba(#ffcd00, 0);
  }
}

.GW {
  background-image: url(../imgs/GW.png);
  animation: GW 0.8s linear infinite;
}
@keyframes GW {
  0% {
      box-shadow:
          0 0 0 0 rgba(#d11216, 0.3),
          0 0 0 15px rgba(#d11216, 0.3),
          0 0 0 30px rgba(#d11216, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#d11216, 0.3),
          0 0 0 30px rgba(#d11216, 0.3),
          0 0 0 50px rgba(#d11216, 0);
  }
}

.GH {
  background-image: url(../imgs/GH.png);
  animation: GH 0.8s linear infinite;
}
@keyframes GH {
  0% {
      box-shadow:
          0 0 0 0 rgba(#ef7c12, 0.3),
          0 0 0 15px rgba(#ef7c12, 0.3),
          0 0 0 30px rgba(#ef7c12, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#ef7c12, 0.3),
          0 0 0 30px rgba(#ef7c12, 0.3),
          0 0 0 50px rgba(#ef7c12, 0);
  }
}

.LD {
  background-image: url(../imgs/LD.png);
  animation: LD 0.8s linear infinite;
}
@keyframes LD {
  0% {
      box-shadow:
          0 0 0 0 rgba(#e7b72e, 0.3),
          0 0 0 15px rgba(#e7b72e, 0.3),
          0 0 0 30px rgba(#e7b72e, 0.3);
  }

  100% {
      box-shadow:
          0 0 0 15px rgba(#e7b72e, 0.3),
          0 0 0 30px rgba(#e7b72e, 0.3),
          0 0 0 50px rgba(#e7b72e, 0);
  }
}